<template>
	<!-- 生产调度 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">摄像机统计</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="1" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">视频列表</text></view>
				</template>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">重点视频监控</text></view>
				</template>
			</u-collapse-item>
			<u-collapse-item name="4" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">AI识别告警统计分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData" />
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts3" :chartData="chartData2" />
				</view>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([1, 2, 3, 4, 5, 6, 7])
	const baseOpts = {
		padding: [10, 10, 0, 10],
		enableScroll: false,
		dataLabel: false,
		legend: {
			show: false
		},
		xAxis: {
			disableGrid: true,
			mix: 0
		},
		yAxis: {
			gridType: "dash",
			dashLength: 2,
			showTitle: true,
			data: [{
				min: 0,
				title: '次'
			}]
		},
		extra: {
			area: {
				type: "curve",
				opacity: 0.2,
				addLine: true,
				width: 2,
				gradient: true,
				activeType: "hollow"
			}
		}
	}
	let chartData = ref({}),
		chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		chartData4 = ref({}),
		opts = {
			color: ["#5589FF"],
			...baseOpts
		},
		opts1 = {
			color: ["#5855FF"],
			...baseOpts
		},
		opts2 = {
			color: ["#FFAD55"],
			...baseOpts
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			legend: {
				show: true,
				position: 'bottom'
			},
			dataLabel: false,
			title: {
				name: "88",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res = {
				categories: ["8.1", "8.2", "8.5", "8.6", "8.9", "8.20"],
				series: [{
					name: "",
					setShadow: [
						3,
						8,
						10, "#FC8452"
					],
					data: [2, 8, 5, 7, 4, 2]
				}]
			};
			chartData.value = JSON.parse(JSON.stringify(res));
			let res1 = {
				series: [{
					data: [{
						name: "正常",
						value: 36,
					}, {
						name: "离线",
						value: 30,
					}, {
						name: "故障",
						value: 16,
					}]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));
			let res2 = {
				series: [{
					data: [{
						name: "人员闯入",
						value: 36,
					}, {
						name: "车辆超速",
						value: 30,
					}]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));
		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
</style>